<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>:nth-child(n)选择器 和 :nth-last-child(n)</title>
		<!-- 
		nth-child(n)选择器  和 :nth-last-child(n) 是
		:first-child选择器  和 :last-child 的扩展
		nth-child(n)选择器  选择父元素下任意子元素 (正数)
		:nth-last-child(n) 选择父元素下任意子元素 (倒数)
		 -->
		<style type="text/css">
			p {
				color: #0000FF;
			}

			p:nth-child(2) {
				color: red;
			}

			p:nth-last-child(2) {
				color: red;
			}

			/* :nth-last-child(an+b) 原理同:nth-child，
			只不过方向相反，从满足条件的兄弟子节点后面开始计数 */

			li:nth-last-child(2) {
				color: green;
			}
		</style>
		<!-- 在此p标签地父类是body -->
	</head>
	<body>

		<p>1</p>
		<p>2</p>
		<p>3</p>
		<p>4</p>
		<p>5</p>

		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>

	</body>
</html>
